<template>
	<view class="comment_box">
		<u-upload ref="uUpload" @on-change='onChange' :action="action" :header='header' :file-list="fileList">
		</u-upload>
		<view class="rate_box">
			<view class="rate_title">
				评分
			</view>
			<u-rate :count="count" v-model="form.score"></u-rate>
		</view>
		<view class="title">
			评论一下
		</view>
		<u-input :height='200' placeholder="您对这个商品满意吗?说一下把~" v-model="form.comment" type="textarea" :border="true" />
		<view style="padding: 30rpx;" class="">
			<u-button type="primary" shape="circle" @click="submit">提交评论</u-button>
		</view>
	</view>
</template>

<script>
	import cacheFunc from '@/utils/cache.js'
	import {
		baseURL
	} from '@/config/config.js'
	export default {
		data() {
			return {
				count: 5,
				form: {
					comment: "",
					score: 5
				},
				action: baseURL + 'appUser/uploadImg',
				fileList: [],
				header: {
					token: cacheFunc.getCache('token') || ''
				},
				order: {}
			};
		},
		onLoad(e) {
			this.order = JSON.parse(e.order)
		},
		methods: {
			submit() {

				let files = [];
				// 通过filter，筛选出上传进度为100的文件(因为某些上传失败的文件，进度值不为100，这个是可选的操作)
				files = this.$refs.uUpload.lists.filter(val => {
					return val.progress == 100;
				})
				console.log(this.order)
				this.form.imgurl = files.map(item => item.response.data).join(',')
				if (!this.form.comment) {
					uni.showToast({
						title: '请输入评论内容',
						icon: 'none'
					})
				} else {
					this.$u.api.addGoodsComment({
						...this.form,
						...this.order,
						orderId: this.order.id
					}).then(res => {
						uni.showToast({
							title: '评论成功',
							icon: 'none'
						})
						uni.navigateTo({
							url: '/pages/order/order'
						})
					})
				}
			},
			onChange(res, index, lists, name) {
				console.log(res, '上传')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.comment_box {
		padding: 30rpx;

		.title {
			font-size: 26rpx;
			color: #575757;
			margin-bottom: 20rpx;
		}

		.rate_box {
			display: flex;
			align-items: center;

			padding: 20rpx 0;
			margin-bottom: 50rpx;

			.rate_title {
				font-size: 26rpx;
				color: #575757;
				margin-right: 20rpx;
			}


		}
	}
</style>
